<template>
  <basic-container>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-setting"></i> 供应商品管理</el-breadcrumb-item>
        <el-breadcrumb-item><i class="el-icon-date"></i> 详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <avue-detail v-model="detailGoods" :option="supplyGoodsDetail">

      <template slot-scope="scope" slot="thumbUrlForm">
        <div style="margin-left: 20px"><img :src="detailGoods.thumbUrl" alt="" class="thumb"></div>
      </template>

      <template slot-scope="scope" slot="photoListForm">
        <div>
          <img v-for="(item,index) in detailGoods.photoList"
               :key="index"
               :src="item.picUrl"
               width="180" height="180"
               style="margin-right: 10px" />
        </div>
      </template>

    </avue-detail>
      <!--    表格部分-->
    <avue-crud ref="crud" :data="modelList" :option="goodsoption">

      <template slot-scope="scope" slot="modelStorage">
        <input-box :changeValue="scope.row.modelStorage"
                   :goodsName="scope.row.goodsName"
                   :goods-id="scope.row.modelId"
                   :model-storage = 'true'
                   :type="2"
                   title="修改库存"
                   @refresh="refresh"
        ></input-box>
      </template>

      <template slot-scope="scope" slot="relationType">
        
        <el-switch
          v-model="scope.row.relationType"
          :active-value="'1'"
          :inactive-value="'0'"
          active-color="#13ce66"
          inactive-color="#ff4949"
          @change="isRelationType(scope.row)"
        >
        </el-switch>
      </template>

      <template slot-scope="scope" slot="handle">
        <el-button type="text" size="small" @click="bindSupply(scope.row)">绑定</el-button>
      </template>
    </avue-crud>

    <avue-detail v-model="detailGoods" :option="detailDescOption"></avue-detail>

      <!--    谈话框-->
    <el-dialog
      title="平台商品列表"
      :visible.sync="dialogVisible"
      width="90%"
      :before-close="handleClose"
    >
        <supply-bind :supplyShopId="detailGoods.shopId"
                     :supplyGoodsId="supplyGoodsId"
                     :supplyModelId="supplyModelId"
                     @closeDialog="handleClose"
        ></supply-bind>
    </el-dialog>

    <div>
      <el-button type="primary" @click="goBack">返 回</el-button>
    </div>
  </basic-container>
</template>

<script>
  import {supplygoodsdetail,goodsoption} from "../../const/crud/supply/supplygoodsdetail"
  import {getgoodsinfo,cancelrelategoods} from "../../api/supply/supply_goods_info"
  import supplyBind from "./component/supplyBind";
  import inputBox from "./component/inputBox";
  export default {
    name: "detail_goods",
    data() {
      return {
        supplyGoodsDetail: supplygoodsdetail,
        detailGoods: [],
        modelList: [],
        goodsoption: goodsoption,
        dialogVisible: false,
        supplyGoodsId: '',
        supplyModelId: '',
        shopId: '',
        goodsId: '',
        detailDescOption:{
          group: [
            {
              icon: 'el-icon-info',
              label: '商品信息',
              prop: 'group1',
              column: [
                {
                  label: "商品描述",
                  prop: 'detailDesc',
                  span: 24,
                }
              ]
            }
          ]
        }
      }
    },
    components:{
      supplyBind,
      inputBox
    },
    beforeRouteEnter(to, from, next) {
      next(vm => {
        vm.shopId = vm.$route.query.res.shopId;
        vm.goodsId = vm.$route.query.res.goodsId;
        vm.getGoodInfo()
      });
    },
    // created() {
    //   this.getGoodInfo()
    // },
    methods: {
      //获取信息
      getGoodInfo() {
        let params = {
          shopId: this.shopId,
          goodsId: this.goodsId
        }
        getgoodsinfo(params).then(res => {
          // console.log(res.data.data);
          let data = res.data.data
          data.sorting = data.sort
          data.isMarketable = data.isMarketable.toString()
          this.detailGoods = data
          this.modelList = res.data.data.modelList
        })
      },
      refresh() {
        console.log('刷新');
        this.getGoodInfo()
      },
      //返回
      goBack(time = 1000) {
        let that = this;
        setTimeout(function () {
          that.$store.commit('DEL_ONE_TAG', that.$route);
          that.$router.go(-1);
        }, time);
      },
      //去绑定平台商品
      bindSupply(val) {
        this.supplyGoodsId = val.goodsId
        this.supplyModelId = val.modelId
        this.dialogVisible = true
      },
      //弹窗关闭时更行列表
      handleClose() {
        this.dialogVisible = false
        this.getGoodInfo()
      },
      //取消关联
      isRelationType(val) {
        let params = {
          shopId: this.detailGoods.shopId,
          supplyModelId: val.modelId,
          supplyGoodsId: val.goodsId
        }
        if(val.relationType === "0"){
          cancelrelategoods(params).then(res => {
            console.log("取消成功");
            this.$message.success("取消成功")
          }).catch(err => {
            val.relationType = "1"
            this.$message.error("取消失败")
          })
        }
        //绑定
        if(val.relationType === "1") {
          this.supplyGoodsId = val.goodsId
          this.supplyModelId = val.modelId
          this.dialogVisible = true
        }

      }
    }
  }
</script>

<style scoped>
.thumb {
  position: relative;
  top: 50%;
  width:180px;
  height:180px;
}
</style>
